<!-- userList.jsp -->
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html lang="en">
<style>
    /* styles.css */
    body {
        font-family: Arial, sans-serif;
        background-color: #f8f9fa;
        margin: 0;
        padding: 0;
    }

    .container {
        width: 80%;
        margin: 0 auto;
        padding: 20px;
        background-color: #ffffff;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }

    h1 {
        text-align: center;
        color: #343a40;
    }

    .user-table {
        width: 100%;
        border-collapse: collapse;
        margin-top: 20px;
    }

    .user-table th, .user-table td {
        padding: 12px;
        border: 1px solid #dee2e6;
        text-align: left;
    }

    .user-table th {
        background-color: #007bff;
        color: white;
    }

    .user-table tr:nth-child(even) {
        background-color: #f2f2f2;
    }

    .btn {
        display: inline-block;
        padding: 6px 12px;
        font-size: 16px;
        font-weight: 400;
        line-height: 1.5;
        text-align: center;
        white-space: nowrap;
        vertical-align: middle;
        user-select: none;
        border: 1px solid transparent;
        border-radius: 5px;
        transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
        border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    }

    .btn-primary {
        color: #fff;
        background-color: #007bff;
        border-color: #007bff;
    }

    .btn-danger {
        color: #fff;
        background-color: #dc3545;
        border-color: #dc3545;
    }

    .modal fade {
        width: 100%;
        position: absolute;
        top: 20px;
        align-items: center;
    }

    .note {
        font-size: 12px;
        color: #6c757d;
    }
</style>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户列表</title>
    <!-- 引入CSS样式表 -->
</head>
<body>
<div class="container">
    <h1>用户管理列表</h1>
    <table class="user-table">
        <thead>
        <tr>
            <th>序号</th>
            <th>用户名</th>
            <th>密码</th>
            <th>邮箱</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <c:forEach var="user" items="${users}">
            <tr>
                <td>${user.id}</td>
                <td>${user.username}</td>
                <td>${user.password}</td> <!-- 出于安全考虑，密码以星号显示 -->
                <td>${user.email}</td>
                <td>
                    <a href="UserGetUserUpdate?id=${user.id}" class="btn btn-primary">修改</a>
                    <button type="button" class="btn btn-danger" onclick="confirmDelete(${user.id})">删除</button>
                </td>
            </tr>
        </c:forEach>
        </tbody>
    </table>
</div>

<!-- 删除用户的确认对话框（使用JavaScript和Bootstrap的Modal组件） -->
<!-- 注意：这里假设你已经引入了Bootstrap的JS和CSS文件 -->
<div class="modal fade" id="deleteM0o010al" tabindex="-1" aria-labelledby="deleteModalLabel" style="display: none;">
    <div class="modal-dialog" style="margin: 0 auto">
        <div class="modal-content" style="border: 1px solid darkgray;width: 400px;border-radius: 10px">
            <div class="modal-header">
                <h5 class="modal-title" id="deleteModalLabel">确认删除</h5>
            </div>
            <div class="modal-body">
                您确定要删除选中的用户吗？
            </div>
            <div class="modal-footer" style="text-align: right">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <button type="button" class="btn btn-danger" id="confirmDeleteButton">删除</button>
            </div>
        </div>
    </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script type="text/javascript">
    function confirmDelete(userId) {
        let element = document.querySelector("#deleteM0o010al");
        element.style.display = 'block';
        let element1 = document.querySelector("#deleteM0o010al");
        element1.onclick = function () {
            element.style.display = 'none';
        };
        let deleteButton = document.getElementById('confirmDeleteButton');
        deleteButton.onclick = function () {
            window.location.href = 'UserListDel?id=' + userId;
        };
        var modal = new bootstrap.Modal(document.getElementById('deleteModal'));
        modal.show();
    }
</script>
</body>
</html>